<template>
	<section class="todoapp">

	<TodoHeader	:arr="list"
							@enter="enterFn"
	></TodoHeader>


	<TodoMain	:arr="showList"
						@del="delFn"
	></TodoMain>


	<TodoFooter	:arr="list"
							@clear="clearFn"
							@selected="selectedFn"
	></TodoFooter>

	</section>
</template>

<script>
	// 样式引入 + 导入组件并注册使用
	import TodoHeader from './components/TodoHeader.vue'
	import TodoMain from './components/TodoMain.vue'
	import TodoFooter from './components/TodoFooter.vue'

	import './styles/base.css'
	import './styles/index.css'

	export default {
		components: {
			TodoHeader,
			TodoMain,
			TodoFooter
		},
		data() {
			return {
				list: [{
						id: 100,
						name: "吃饭",
						isDone: true
					},
					{
						id: 201,
						name: "睡觉",
						isDone: false
					},
					{
						id: 103,
						name: "打豆豆",
						isDone: true
					},
				],
				type: ''
			};
		},

		methods: {
			delFn(id){
				this.list = this.list.filter(item => item.id !== id)
			},
			enterFn(name){
				this.list.unshift({
					id: parseInt(Math.random()*999+1),
					name,
					isDone: false
				})
			},
			clearFn(){
				this.list = this.list.filter(item => item.isDone !== true)
			},
			selectedFn(type){
				this.type = type
				console.log(this.type);
			},
		},

		computed: {
			showList(){
				if(this.type === 'active'){
					return this.list.filter(item => item.isDone !== true)
				} else if(this.type === 'completed'){
					return this.list.filter(item => item.isDone === true)
				} else {
					return this.list
				}
			}
		}


	};
</script>
